<template>
  <div :style="{ width: width, marginTop: top }" class="content-management-no-data">
    <div class="no-data-wrap">
      <img class="no-data-img" :style="{ width: emptyImgWidth }" :src="imgUrl" />
      <p class="no-data-font" :style="{ fontSize: tipSize }">{{ tipText }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  interface Props {
    width?: string;
    top?: string;
    tipText?: string;
    tipSize?: string;
    imgUrl?: string;
    emptyImgWidth?: string;
  }
  const props = withDefaults(defineProps<Props>(), {
    top: '0',
    width: '100%',
    tipText: '数据更新中，敬请期待！',
    tipSize: '16px',
    imgUrl: '/img/empty.svg',
    emptyImgWidth: '60%',
  });
</script>
<style lang="scss" scoped>
  .content-management-no-data {
    width: 100%;
    /* 暂无数据 */
    .no-data-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .no-data-img {
    }
    .no-data-font {
      color: #999;
      font-size: 14px;
      margin-top: 20px;
    }
  }
</style>
